前言

大家好！歡迎來到「人設實驗室」的第二天！

昨天我們已經把整個專案的架構和技術選型都規劃好了，就像是蓋房子前的設計藍圖。今天，我們就要打下第一根樁——實際在電腦中建立我們的專案，並把開發環境準備就緒。

我們的目標很明確：

1. 建立一個全新的 Next.js 專案。
2. 在建立過程中，直接整合 Tailwind CSS。
3. 啟動開發伺服器，確保一切運作正常。

話不多說，捲起袖子，打開你的終端機 (Terminal)，讓我們開始吧！

一步到位的神奇指令

得益於現代前端框架強大的工具鏈，我們不再需要手動一個個安裝、設定 react, react-dom, next 等套件。Next.js 官方提供了一個 CLI (命令列介面) 工具 create-next-app，它可以幫助我們一鍵生成帶有完整配置的專案。

更棒的是，它還能同時幫我們設定好 Tailwind CSS！

npx create-next-app@latest

指令說明：
npx：這是一個 npm 內建的工具，它會執行指定的套件，而不需要將其全域安裝到你的電腦上。
create-next-app@latest：這會確保你使用的是最新版本的 Next.js 專案產生器。

互動式設定問答
執行指令後，終端機會出現一系列的問答，引導你完成專案的個人化設定。以下是我的建議設定，也是我們這個專案將會採用的選項：

Plaintext

✔ What is your project named? … persona-lab
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

讓我們來逐一解釋每個選項的意義：

What is your project named? (專案名稱)
我將它命名為 persona-lab，你也可以取自己喜歡的名字。

Would you like to use TypeScript? (是否使用 TypeScript?)
選擇 Yes。TypeScript 是 JavaScript 的超集，它增加了型別系統，能幫助我們在開發階段就發現許多潛在的錯誤，讓程式碼更健壯、更易於維護。

Would you like to use ESLint? (是否使用 ESLint?)
選擇 Yes。ESLint 是一個程式碼檢查工具，它能幫助我們統一程式碼風格，避免低級錯誤，是團隊協作和維持程式碼品質的利器。

Would you like to use Tailwind CSS? (是否使用 Tailwind CSS?)
選擇 Yes。這是我們 Day 1 就規劃好的核心樣式方案，選擇 Yes，create-next-app 會自動幫我們完成所有繁瑣的設定。

Would you like to use src/ directory? (是否使用 src 資料夾?)
選擇 Yes。將所有應用程式的原始碼都放在 src 資料夾內是一個好的實踐，能讓專案結構更有條理。

Would you like to use App Router? (是否使用 App Router?)
選擇 Yes。這是 Next.js 13 以後推出的新一代路由系統，支援 Layouts、Server Components 等強大特性，是目前官方推薦的主流方案。

Would you like to customize the default import alias? (是否自訂預設的匯入別名?)
選擇 No。這裡直接使用預設的 @/* 即可，它讓我們可以用 import Component from '@/components/MyComponent' 這樣更簡潔的方式來匯入模組，而不用寫 ../../.. 這種惱人的相對路徑。

當你回答完所有問題後，安裝過程會自動開始。稍等片刻，你會看到 Success! 的成功訊息。

啟動我們的實驗室！
專案建立完成後，還差最後兩步：

進入專案資料夾：

cd persona-lab

啟動開發伺服器：

npm run dev

執行後，你會在終端機看到類似以下的訊息：

Plaintext

- ready started server on 0.0.0.0:3000, url: http://localhost:3000

這表示我們的開發伺服器已經成功啟動了！

今日總結 & 明日預告

今天我們完成了從 0 到 1 的關鍵一步，透過一行指令就建立了一個現代化的前端專案。這為我們接下來 28 天的開發鋪平了道路。

Day 3 預告：專案初探與清理！認識專案結構並打造我們第一個頁面。

明天，我們將會深入探索今天建立的資料夾結構，並動手清理預設的模板程式碼，換上我們「人設實驗室」的第一個頁面。敬請期待！